<template>
  <div class="wrapper">
    <header>
      <p>减脂菜谱推荐</p>
    </header>
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
    </div>
    <div v-if="loading" class="loading-animation">正在加载菜谱信息，请稍候...</div>
    <div v-else class="diet-recipes-list">
      <div v-for="recipe in dietRecipes" :key="recipe.id" class="recipe-item">
        <div class="recipe-img">
          <img :src="recipe.imageurl" alt="菜谱图片" :class="{'placeholder-img':!recipe.imageUrl}">
        </div>
        <div class="recipe-info">
          <h3>{{ recipe.name }}</h3>
          <p>热量: {{ recipe.calories }} kcal</p>
          <p>做菜用时: {{ recipe.cookingtime }} 分钟</p>
      
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DietRecipe",
  data() {
    return {
      dietRecipes: [],
      loading: true
    };
  },
  mounted() {
    // 这里从后端获取减脂菜谱列表数据
    axios.get("/api/recipes").then(response => {
      console.log(response.data);
      // 假设后端返回的数据结构中，菜谱列表在 response.data.data 中
      if (response.data) {
        this.dietRecipes = response.data.object;
        this.loading = false;
      } else {
        console.error("后端返回的数据格式不正确");
        this.loading = false;
      }
    })
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 菜谱卡片容器样式 */
.recipe-item {
  background-color: #fff; /* 卡片背景颜色 */
  border: 1px solid #ddd; /* 卡片边框 */
  border-radius: 8px; /* 卡片圆角 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 卡片阴影 */
  margin: 10px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 垂直排列内容 */
}

/* 菜谱卡片hover效果 */
.recipe-item:hover {
  transform: translateY(-5px); /* 鼠标悬停时卡片上移 */
}

/* 菜谱卡片图片样式 */
.recipe-img img {
  width: 100%; /* 使图片宽度自适应 */
  height: auto;
  border-top-left-radius: 8px; /* 图片圆角 */
  border-top-right-radius: 8px; /* 图片圆角 */
}

/* 菜谱卡片信息区域样式 */
.recipe-info {
  padding: 15px; /* 内边距 */
  flex-grow: 1; /* 使信息区域填充剩余空间 */
}

/* 菜谱卡片标题样式 */
.recipe-info h3 {
  font-size: 1.8rem; /* 根据设计调整字体大小 */
  color: #333;
  margin-bottom: 0.5rem;
}

/* 菜谱卡片热量、用时、步骤等样式 */
.recipe-info p {
  font-size: 1.2rem;
  color: #666;
  margin-top: 0.5rem;
}

/* 加载动画样式 */
.loading-animation {
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

/* 占位图片样式 */
.placeholder-img {
  width: 100%; /* 占位图宽度调整为100% */
  height: 200px; /* 占位图高度 */
  background-color: #f0f0f0;
  border-bottom-left-radius: 8px; /* 占位图圆角 */
  border-bottom-right-radius: 8px; /* 占位图圆角 */
}

/* 媒体查询 */
@media (min-width: 576px) { /* 小于576px时，卡片堆叠 */
.recipe-item {
    flex-direction: row; /* 水平排列内容 */
  }
.recipe-img {
    flex: 1; /* 图片区域占据一定比例的空间 */
  }
.recipe-info {
    flex: 2; /* 信息区域占据更多比例的空间 */
  }
.recipe-info h3 {
    font-size: 2rem; /* 中等屏幕下增加标题字体大小 */
  }
.recipe-info p {
    font-size: 1.4rem; /* 中等屏幕下增加描述字体大小 */
  }
}

@media (min-width: 768px) { /* 大于768px时，增加卡片之间的间距 */
.recipe-item {
    margin: 20px;
  }
.recipe-info h3 {
    font-size: 2.2rem; /* 大屏幕下进一步增加标题字体大小 */
  }
.recipe-info p {
    font-size: 1.6rem; /* 大屏幕下进一步增加描述字体大小 */
  }
}

@media (min-width: 992px) { /* 大于992px时，进一步增加间距 */
.recipe-item {
    margin: 30px;
  }
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 10px; /* 根据需要调整 */
  left: 10px; /* 根据需要调整 */
  cursor: pointer;
  color: #fff; /* 根据header背景色调整 */
  font-size: 24px; /* 根据需要调整 */
  z-index: 1001; /* 确保按钮在header之上 */
}

/* 如果使用Font Awesome图标，确保已经正确导入Font Awesome */
.fa-arrow-left:before {
  content: "\f060";
}
</style>